<template>
 <div class="coupons">
    <div class="text">
      <span>优惠券专区</span>
    </div>
    <div class="couponsListContent">
      <div class="couponsList" v-for="(item,i) in this.couponsList" :key="i">
        <el-popconfirm
          title="确认领取该优惠券？"
          hide-icon
          confirm-button-type="success"
          cancel-button-type="success"
          @confirm="exchangeCoupon(item)"
        >
        <template #reference>
          <coupon :coupon="item" class="coupon" ></coupon>
        </template>
        </el-popconfirm>
      </div>
    </div>
    <div class="text">
      <span>我的优惠券</span>
    </div>
    <div class="mycouponsListContent">
        <div class="mycouponsList" v-for="(item,i) in this.mycoupons" :key="i">
          <my-coupon :mycoupon="item" class="coupon"></my-coupon>
        </div>
    </div>
 </div>
</template>

<script>
import api from '@/api/coupons_index.js'
import coupon from '@/components/coupon/coupon.vue'
import myCoupon from '@/components/coupon/myCoupon.vue'

 export default {
  name: '' ,
  components:{
    coupon,
    myCoupon
  },
 data () {
 return {
   couponsList:[],
   mycoupons:[],
  }
 },
 mounted(){
  this.getCouponsList()
  this.getMyCoupons()
 },
 methods:{
  getCouponsList(){
    api.getCouponsList().then((res) => {
      console.log(res)
      if(res.data.code == 200) {
        this.couponsList = res.data.obj
        // console.log(this.couponsList)
      }
    }).catch(error => {
      console.log(error)
    })
  },
  exchangeCoupon(item) {
    api.exchangeCoupons(item.id).then((res) => {
      if(res.data.code == 200){
        // let i = this.mycoupons.length()
        // this.mycoupons[i] = res.data.obj[0]
         this.$alert(item.description+'优惠券', '领取成功！', {
          confirmButtonText: '确定',
        }); 
      }
    }).catch(error => {
      console.log(error)
      this.$alert('', '换取次数已达上限！', {
          confirmButtonText: '确定',
      });
    })
  },
  getMyCoupons(){
    api.getUserCoupons().then((res) => {
      console.log(res)
      if(res.data.code == 200) {
        this.mycoupons = res.data.obj
        console.log(this.mycoupons)
      }
    }).catch(error => {
      console.log(error)
    })
  }
 }
}

</script>
<style scope lang="less">
.coupons{
  width: 100%;
  .text{
    position: absolute;
    background-color: #fff;
    float: left;
    margin-top: 10px;
    margin-left: 5px;
    span{
      background-color: #22A8AA;
      color: #fff;
      padding: 5px;
      border-radius: 5px;
      cursor: default;
    }
  }
  .couponsListContent{
    margin-top: 10px;
    margin-left: 10px;
    height: 350px;
    display: flex;
    padding: 30px ;
    background-color: #fff;
  .couponsList{
    .coupon{
      height: 300px;
      margin-right: 50px;
    }
  }
  }
  .mycouponsListContent{
    display: flex;
    background-color: #fff;
    margin-top: 10px;
    margin-left: 10px;
    height: 350px;
    padding: 30px ;
    display: flex; 
      .mycouponsList{
      .coupon{
        height: 300px;
        margin-right: 50px;
      }
    }
  }
  
}
</style>